<template>
  <div class="search-suggest">
      <h5>搜索"{{keywords}}"</h5>
      <ul v-if="suggestList.length>0">
        <li @click="$emit('changekeyword',s.name)" v-for="s in suggestList" :key="s.id">
          <span>{{s.name}}</span>
        </li>
      </ul>
      <music-loading v-else></music-loading>
  </div>
</template>

<script>
import MusicLoading from './MusicLoading.vue';
import _ from 'lodash'
export default {
  props:{
    keywords:String
  },
  data(){
    return {
      suggestList:[]
    }
  },
  created(){
    this.getSuggest();
  },
  methods:{
    async getSuggest(){
        let suggest=await this.axios.get(`/search/suggest?keywords=${this.keywords}`);
        console.log(suggest)
        let suggestAll=[];
        if(suggest && suggest.result && suggest.result.order){
          suggest.result.order.forEach((keyname)=>{
              suggestAll=suggestAll.concat(suggest.result[keyname]);
          });
          console.log("拼接之后的结果==>",suggestAll)
          this.suggestList=suggestAll;
        }
    }
  },
  watch:{
    keywords:_.debounce(function(){
      this.getSuggest();
    },200)
  },
  components:{
    MusicLoading
  }
}
</script>

<style lang="less" scoped>
.search-suggest{
  h5{
    font-size:15px;
    color:rgb(93, 144, 202);
    border-bottom: 1px solid #eee;
    padding:0px 0px 10px 5px;
  }
  ul{
    padding-left:6px;
    li{
      display: flex;
      align-items: center;
      &::before{
        content:"";
        background: url() no-repeat;
        display: inline-block;
        width:15px;
        height:15px;
      }
      span{
        flex:1;
        border-bottom: 1px solid #eee;
        padding:13px 0px 13px 8px;
        font-size:14px;
      }
    }
  }
}
</style>